<!-- 登录 -->
<template>
  <div class="login">
    <h1>XMNMS-登录</h1>

    <el-form :model="login"
             status-icon
             :rules="rules"
             ref="login"
             label-width="100px"
             class="demo-login">

      <el-form-item label="账号"
                    prop="username">
        <el-input type="text"
                  v-model="login.username"
                  autocomplete="off"
                  placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="密码"
                    prop="password">
        <el-input type="password"
                  v-model="login.password"
                  autocomplete="off"
                  placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="submitForm('login')">登录</el-button>
        <el-button @click="resetForm('login')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      str: '',
      login: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输用户名', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/api/checklogin', {
            username: this.login.username,
            password: this.login.password
          }).then((res) => {
            this.$cookies.set('users', res.data.result)
            this.$store.commit('setUserInfo', res.data.result)
            this.$router.push({ path: '/mycenter' })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log(1, this.$cookies.get('users'))
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang='stylus' scoped>
h1
  text-align center
  font-size 26px
  font-weight bold
  padding-bottom 8px

.login
  width 464px
  height 190px
  padding 23px 18px 60px 18px
  position absolute
  top 50%
  left 50%
  margin-top -134px
  margin-left -251px
  border 1px solid #ccc

  >>>.el-form-item__content
    width 300px
    margin-left 0
    margin 0 auto
    margin-top 10px

  >>>.el-form-item__label
    line-height 50px

  >>>.el-input
    input
      height 40px

  >>>.el-form-item__label:before
    content ''
    display none

  .xmn_button
    width 100%
</style>
